<html>
<head>
    <title>SIMILE | Exhibit | Presidents (v2)</title>
    
    <link href="schema.js" type="application/json" rel="exhibit/data" />
    <link href="presidents.js" type="application/json" rel="exhibit/data" />
    
    <script src="http://static.simile.mit.edu/exhibit/api-2.0/exhibit-api.js"></script>
    <script src="http://static.simile.mit.edu/exhibit/extensions-2.0/time/time-extension.js" type="text/javascript"></script>
    
    <!-- google map key for the simile web site -->
    <script src="http://static.simile.mit.edu/exhibit/extensions-2.0/map/map-extension.js?gmapkey=ABQIAAAA5JLLfCE9c7HAtg25QM2KCRQtmVvwtG6TMOLiwecD59_rvdOkHxTAPhubLidYKS8G8qHrZGTBqAeJEg"></script>
    
    <!-- google map key for http://127.0.0.1:8888/ -->
    <!--script src="http://static.simile.mit.edu/exhibit/extensions-2.0/map/map-extension.js?gmapkey=ABQIAAAANowuNonWJ4d9uRGbydnrrhREGtQZq9OFJfHndXhPP8gxXzlLARRSAIK_NOxPWcNPU-OIP9Qa_mmMPw" type="text/javascript"></script-->
    
    <link rel='stylesheet' href='styles-2.css' type='text/css' />
</head>

<body>
    <div ex:role="collection" ex:itemTypes="President"></div>
    <table id="frame">
        <tr>
            <td id="sidebar">
                <h1>US Presidents</h1>
                <p>Here is the <a href="presidents.js" target="_blank">Exhibit JSON data file</a>.
                
                <div id="exhibit-browse-panel">
                    <b>Search:</b>
                    <div ex:role="facet" ex:facetClass="TextSearch"></div>
                    <hr/>
                    <div ex:role="facet" ex:expression=".religion" ex:facetLabel="Religions" ex:height="20em"></div>
                    <div ex:role="facet" ex:expression=".party" ex:facetLabel="Political Parties" ex:height="10em" ex:colorCoder="party-colors"></div>
                    <div ex:role="facet" ex:expression=".dieInOffice" ex:facetLabel="Died In Office" ex:height="4em"></div>
                    <center ex:role="logo" ex:color="DeepSkyBlue"></center>
                </div>
            </td>
            <td id="content">
                <div ex:role="coder" ex:coderClass="Color" id="party-colors">
                    <span ex:color="red">Republican</span>
                    <span ex:color="blue">Democratic</span>
                    
                    <span ex:case="others"  ex:color="#aaa">Other parties</span>
                    <span ex:case="mixed"   ex:color="#eee">Many parties</span>
                    <span ex:case="missing" ex:color="#444">No party</span>
                </div>
                
                <div class="item" ex:role="lens" style="display: none;">
                    <table cellpadding="10" width="100%">
                        <tr>
                            <td width="1"><img ex:src-content=".imageURL" /></td>
                            <td>
                                <a ex:href-content=".url"><span ex:content=".label" /></a>
                                <div>Terms: <span ex:content=".term"></span>, <span ex:content=".party"></span></div>
                                <div>Religions: <span ex:content=".religion"></span></div>
                                <div>Birth: <span ex:content=".birth"></span>, <span ex:content=".birthPlace"></span></div>
                                <div ex:if-exists=".death">Death: <span ex:content=".death"></span>, <span ex:content=".deathPlace"></span></div>
                                <div ex:control="item-link"></div>
                            </td>
                        </tr>
                    </table>
                </div>
                <div ex:role="coordinator" id="president"></div>
                
                <div ex:role="view"
                    ex:viewClass="Timeline"
                    ex:label="Terms"
                    ex:proxy=".presidency"
                    ex:start=".inDate"
                    ex:end=".outDate"
                    ex:colorKey=".party"
                    ex:colorCoder="party-colors"
                    ex:bubbleWidth="320"
                    ex:topBandPixelsPerUnit="400"
                    ex:selectCoordinator="president"
                    ex:showSummary="false"
                    ex:timelineHeight="170"
                    >
                </div>
                    
                <div ex:role="viewPanel">
                    <div class="map-lens" ex:role="lens" style="display: none;">
                        <div><img ex:src-content=".imageURL" /></div>
                        <span ex:content=".label"></span><br/>
                        <span ex:content=".birthPlace"></span>, <span ex:content=".birth"></span>
                    </div>
                    <div ex:role="view"
                        ex:viewClass="Map"
                        ex:label="Birth Places with Photos"
                        ex:latlng=".birthLatLng"
                        ex:center="38.479394673276445, -95.361328125"
                        ex:zoom="4"
                        ex:bubbleWidth="200"
                        ex:icon=".imageURL"
                        ex:shapeWidth="60"
                        ex:shapeHeight="60"
                        ex:selectCoordinator="president"
                        >
                    </div>
                    <div ex:role="view"
                        ex:viewClass="Map"
                        ex:label="Death Places (by Party)"
                        ex:latlng=".deathLatLng"
                        ex:center="38.479394673276445, -95.361328125"
                        ex:zoom="4"
                        ex:bubbleWidth="200"
                        ex:colorKey=".party"
                        ex:colorCoder="party-colors"
                        ex:selectCoordinator="president"
                        >
                    </div>
                    <div ex:role="view"
                        ex:viewClass="Tabular"
                        ex:label="Details"
                        ex:columns=".term, .label, .party, .presidency.inDate, .presidency.outDate, add(foreach(.presidency, date-range(.inDate, .outDate, 'day')))"
                        ex:columnLabels="term, name, party, took office, left office, days in office"
                        ex:formats="date { mode: medium; show: date }"
                        ex:sortColumn="4"
                        ex:sortAscending="false"
                        >
                        <table style="display: none;">
                            <tr ex:background-style-content="if(exists(.death), '#ccc', 'white')">
                                <td><span ex:content=".term"></span></td>
                                <td><b ex:content=".label"></b><br/><img ex:src-content=".imageURL" /></td>
                                <td><span ex:content=".party"></span></td>
                                <td><span ex:content=".presidency.inDate"></span></td>
                                <td><span ex:content=".presidency.outDate"></span></td>
                                <td><span ex:content="add(foreach(.presidency, date-range(.inDate, .outDate, 'day')))"></span></td>
                            </tr>
                        </table>
                    </div>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>
